<template>
    <!-- home组件的导航栏组件 -->
  <div class="input-nav">
      <div class="input-nav-box">
          <div class="input-nav-item">
                <div class="input-nav-item-left" @click="login">
                    <img class="auto-img" :src="showpic ? headpic : imgurl" alt="">
                </div>
                <div class="input-nav-item-title">{{nickName}}</div>
          </div>
          <div class="input-nav-item-ipt">
                <i class="fa fa-search" aria-hidden="true"></i>
                <input class="search" type="text" placeholder="输入商品名称后enter"
                v-model="ipt" @keyup.enter="getSearch(ipt)">
                
                <i class="fa fa-times-circle" aria-hidden="true"
                @click="clearIpt"></i>

          </div>
      </div>
  </div>
</template>

<script>
export default {
    name:'InputNav',
    data() {
        return {
            //登录图片
            imgurl: require('../assets/images/icon_login.png'),
            ipt:'',
            
            searchPro: [],
            flag:true,
            headpic:'',
            showpic: false,
            nickName:''
        }
    },
    created(){
        if(sessionStorage.getItem('token')) {
               this.headpic=this.$store.state.myheadpic;
               this.nickName=this.$store.state.nickName;
               this.showpic=true;

        }
    },
    methods: {
        //点击登录
        login() {
            //登录过后
            if(sessionStorage.getItem('token')) {
            //    
               this.$router.push({name:"My"});
                
             }else{
                this.$router.push({name: 'Login'});

             }
        },
        //清空搜索框
        clearIpt() {
            this.ipt='';
            this.$emit('show-home',false);
        },
        //获取搜索数据
        getSearch(ipt) {
            this.$emit('coffee-show',{show:this.flag});
            this.axios({
                method:'get',
                url:'/search',
                params:{name:ipt}
            }).then(res=>{
                // 
                if(res.data.code=='Q001') {
                    this.$toast(res.data.msg);
                    this.searchPro=res.data.result;
                    this.$emit("setSearchPro",{data : this.searchPro});
                }
            }).catch(err=>{
                
            })
        },
        
        
    }
    
}
</script>

<style lang='less' scoped>
@import url("../assets/base.less");

    .auto-img {
        height:100%;
    }
    .input-nav-box {
        height:54px;
        line-height: 54px;
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .input-nav-item {
            flex: 1;
            display: flex;
            align-items: center;
            font-weight: bold;
            .input-nav-item-left {
                width:27px;
                height:27px;
                border-radius:50%;
                overflow: hidden;
                font-size: 14px;
                margin-right: 10px;
            }
            .input-nav-item-title {
                font-size: 14px;
                font-weight:bold;
                color:@homehot;
            }
        }
        .input-nav-item-ipt {
            width:60%;
            height:32px;
            font-size: 14px;
            background-color: #F7F8FA;
            border-radius: 32px;
            border:0;
            outline: none;
            overflow: hidden;
            position: relative;
            top:calc(50% - 26px);
            .fa-search {
                position: absolute;
                left:15px;
                top:calc(50% - 8px);
                z-index:999;
                color:#8990DA;
                background-color: #F7F8FA;

            }
            .search {
                width:100%;
                height:32px;
                border:none;
                outline: none;
                position: absolute;
                left:0px;
                padding: 0 35px;
                background-color: #F7F8FA;

            }
            .fa-times-circle{
                position: absolute;
                right: 0;
                margin-right: 10px;
                top: calc(50% - 8px);
                padding-right: 0;
                z-index: 999;
                color: #8990DA;
                font-size: 16px;
                }
        }
    }

</style>